<script setup lang="ts">

import { Position, VueFlow } from '@vue-flow/core'
import { edgeList, nodeList } from '@views/flow/basic/basicData.ts'
import ToolbarNode from '@views/flow/basic/components/ToolbarNode.vue'
const selfNodes = [...nodeList,{
id:'ks',
  type: 'toolbar',
  position: { x:400, y: 300},
  data: {
  label: 'toolbar节点',
    toolbarPosition:Position.Right,
    toolbarVisible: false,
  },
}]
const nodes = ref(selfNodes)
const edges = ref(edgeList)

// Node click event handler
function onNodeClick({ event, node }) {
  console.log('Node clicked:', node, event);
  node.data.toolbarVisible = true
}

</script>

<template>
  <div style="height: calc(100vh - 60px)">
    <VueFlow :nodes="nodes" :edges="edges" @node-click="onNodeClick">
      <template #node-toolbar="p">
        <ToolbarNode v-bind="p"></ToolbarNode>
      </template>
    </VueFlow>
  </div>
</template>

<style scoped>

</style>
